<template>
  <div class="list-container">
    <div class="list-header">
      <span class="col subject">主题</span>
      <span class="col sender">发件人</span>
      <span class="col date">时间</span>
      <span class="col status">状态</span>
    </div>
    <div v-if="filteredMails.length === 0" class="empty-tip">没有搜索结果...</div>
    <SearchItem v-for="item in filteredMails" :key="item.id" :mail="item" @goDetail="goDetail" />
  </div>
</template>

<script setup lang="ts">
import SearchItem from './SearchItem.vue'
import { useRouter } from 'vue-router'
import { computed } from 'vue'

const props = defineProps<{ mails: any[] }>()
const router = useRouter()

// 假设本地存储了当前用户邮箱
const myID = localStorage.getItem('id') || ''

// 过滤掉收件人是自己的邮件
const filteredMails = computed(() => props.mails.filter((item) => item.sender !== myID))
const goDetail = (id: number) => {
  router.push(`/mail/${id}`)
}
</script>
<style scoped>
.list-container {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(209, 96, 83, 0.04);
  padding: 0;
}
.list-header {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid #eee;
  font-weight: bold;
  background: #f5f5f5;
  font-size: 16px;
}
.col.subject {
  display: inline-block;
  width: 320px;
  padding-right: 12px;
}
.col.sender {
  display: inline-block;
  width: 300px;
  padding-right: 12px;
}
.col.date {
  display: inline-block;
  width: 300px;
  padding-right: 12px;
}
.col.status {
  display: inline-block;
  width: 300px;
}
.empty-tip {
  text-align: center;
  color: #aaa;
  padding: 40px 0;
  font-size: 18px;
}
</style>
